<script setup lang="ts">
import { defineProps, defineEmits, computed, ref } from 'vue'
import { useRouterPush } from '@/composables';

const visible = ref(false)

const checkbox = ref(false)

const { toPrivacy } = useRouterPush()

const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    amt: {
        type: Number,
        required: true
    },
    status: {
        type: String,
        default: ''
    },
    isOrder: {
        type: Boolean,
        default: false
    },
    formData: {
        type: Object,
        required: true
    },
})
const statusComputed = computed(() => {
    switch (props.status) {
        case "1":
            return '待支付';
        case "2":
            return '已支付';
        case "3":
            return '已取消';
        case "4":
            return '已评价';
        case "5":
            return '退款中';
        case "6":
            return '退款异常';
        case "7":
            return '退款成功';
        default:
            break;
    }

})

const emit = defineEmits(['submit', 'close'])

</script>

<template>
    <view class="w-full bg-white h-100px z-36 pos-fixed pos-bottom-0px pos-left-0 flex-col-center">
        <!-- 协议勾选区域 -->
        <view v-if="!status || status == '1'" class="px-2 h-1/2 flex-center">
            <nut-checkbox v-model="checkbox" />
            <text class="text-11px w-full text-#000">
                支付即表示同意
                <i class="text-#059669" @click="toPrivacy('1795813205685743618')">《服务须知,注意事项和技术操作知情同意书》</i>
                中的全部条款内容
            </text>
        </view>
        <!-- 支付按钮区域 -->
        <view class="w-full h-1/2 flex justify-around">
            <view v-if="!isOrder" class="mr-2 flex justify-between w-full items-center">
                <view v-if="!status || status == '1'" class="ml-2 flex-col-center items-start">
                    <view class="text-lg">
                        合计：<nut-price :price="amt" />
                    </view>
                    <view class="text-xs">
                        共减：<nut-price :price="formData.specialAmt" />
                    </view>
                </view>
                <nut-button v-if="!status || status == '1'" :loading="loading" :disabled="!checkbox"
                    @click="emit('submit')" class="important:w-180px font-bold text-lg" type="primary">
                    立即支付￥{{ amt - formData.specialAmt }}
                </nut-button>
                <view v-else class=" w-full flex justify-end   font-bold text-lg">
                    <view class="flex-col-center items-start">
                        <view>合计￥：{{ amt }}</view>
                        <view>状态：{{ statusComputed }}</view>
                    </view>
                </view>
            </view>
        </view>
        <nut-dialog title="提示" content="是否取消该订单？" v-model:visible="visible" @cancel="visible = false"
            @ok="emit('close')" />
    </view>
</template>

<style scoped></style>